<template>
  <div class="wrap">
    <header>
      <div class="head_top">
        <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
        休闲娱乐
      </div>
      <div class="search">
        <div class="search_left">
          <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            {{city}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="西安">西安</el-dropdown-item>
              <el-dropdown-item command="上海">上海</el-dropdown-item>
              <el-dropdown-item command="杭州">杭州</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="search_right" @click="jump('search')">
          <img src="../../../static/img/sousuo1.png" alt="">
          <span>搜影片、影院</span>
        </div>
      </div>
      <div class="banner">
        <img src="../../../static/img/banner_3.png" alt="" >
      </div>
      <div class="assembleList">
        <router-link v-for="(x,y) in assembleList" :to="x.page" tag="div" class="abList_box" :key="y" replace>
          <p :class="x.page == present?'select':''">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="x.page == present"></p>
          </transition>
        </router-link>
      </div>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "arder",
    data(){
      return {
        assembleList: [{text: '影院', page: '/components/ClientComponents/arder/arderMovie'}, {text: '玩乐', page: '/components/ClientComponents/arder/panicBuyDelicious'}],
        present: 'arderMovie',
        city:'北京'
      }
    },
    methods:{
      handleCommand(command) {
        this.city = command;
      },
      back() {
        this.$router.back();
      },
      jump(page){
        this.$router.push({
          name:page
        })
      }
    },
    mounted() {
      let str = this.$route.path;
      this.present = str;
      console.log(this.present)
    },
    watch: {
      $route(to, from) {
        let str = this.$route.path;
        this.present = to.path;
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.67rem;
    padding-top: 3.28rem;
  }

  header {
    width: 100%;
    min-height: 3.28rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-image: url("../../../static/img/beijingtu1.png");
    min-height: 3rem;
    background-size: 100% 100%;
    background-position-y: -1rem;
    background-repeat: no-repeat;
    background-color: white;
  }

  .head_top {
    width: 100%;
    height: .55rem;
    color: #ffffff;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .55rem;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }

  .head_top > img {
    width: .07rem;
    height: .13rem;
    position: absolute;
    left: .18rem;
  }

  .search {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .search_left {
    width: 1rem;
    text-align: center;
  }
  >>> .el-dropdown {
    color: #ffffff;
    font-size: .15rem;
  }
  >>> .el-dropdown-menu__item {
    line-height: .36rem;
    padding: 0 .2rem;
    font-size: .14rem;
  }
  >>> .el-popper .popper__arrow::after {
    border-width: .06rem;
  }
  >>> .el-popper[x-placement^=bottom] .popper__arrow::after {
    top: .01rem;
    margin-left: -.06rem;
  }
  .search_right {
    width:2.44rem;
    height:.27rem;
    background:rgba(255,255,255,.4);
    border-radius:.13rem;
    color: #ffffff;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding-left: .26rem;
  }
  .search_right>span {
    font-size:.11rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #ffffff;
  }
  .search_right>img {
    width: .13rem;
    height: .12rem;
    margin-right: .18rem;
  }
  .banner {
    width: 100%;
    height: 1.71rem;
    margin: .1rem 0;
    text-align: center;
  }
  .banner>img {
    width: 3.66rem;
    height: 100%;
  }

  /* 拼团分类部分 */
  .assembleList {
    width: 100%;
    height: .32rem;
    box-sizing: border-box;
    max-height: .32rem;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: .1rem;
  }

  .abList_box {
    height: 100%;
    max-height: .32rem;
    width: .6rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: .05rem;
    margin-right: .7rem;
  }

  .abList_box > p:nth-child(1) {
    color: #999999;
    font-size: .15rem;
  }

  .abList_box > p:nth-child(2) {
    width: .33rem;
    height: .02rem;
    background-color: #FF6F02;
    border-radius: .01rem;
  }

  .select {
    color: #FF6F02!important;
  }
</style>
